<template>
  <div>
    <!-- ======= Blog Section ======= -->
    <section class="blog">
      <div class="container">
        <div class="row">
          <div class="col-md-8 entries">
            <template v-for="(item, index) in resultData.rows" :key="index">
              <article class="entry">
                <h2 class="entry-title">
                  <a @click="jumpSingle(item.id)">{{ item.contentTitle }}</a>
                </h2>

                <div class="entry-meta">
                  <ul>
                    <li class="d-flex align-items-center">
                      <i class="bi bi-person"></i>
                      {{ item.contentAuthor ? item.contentAuthor : "admin" }}
                    </li>
                    <li class="d-flex align-items-center">
                      <i class="bi bi-clock"></i>
                      {{ item.contentDatetime }}
                    </li>
                  </ul>
                </div>

                <div class="entry-content">
                  <p>
                    {{ item.contentDescription }}
                  </p>
                </div>
              </article>
            </template>
            <!-- End blog entry -->
            <!-- 分页 -->
            <div class="row justify-content-center">
              <a-pagination
                @change="onPageChange"
                :current="params.pageNo"
                :pageSize="params.pageSize"
                :total="resultData.total"
              />
            </div>
            <!-- 分页 -->
          </div>
          <!-- End blog entries list -->

          <div class="col-md-4">
            <div class="sidebar">
              <h3 class="sidebar-title">Search</h3>
              <div class="sidebar-item">
                <a-input-search
                  v-model:value="params.contentTitle"
                  placeholder="input search text"
                  enter-button="搜索"
                  size="middle"
                  @search="onSearch"
                />
              </div>
              <!-- End sidebar search formn-->
            </div>
            <!-- End sidebar -->
          </div>
          <!-- End blog sidebar -->
        </div>
        <!-- End .row -->
      </div>
      <!-- End .container -->
    </section>
    <!-- End Blog Section -->
  </div>
</template>

<script>
import { getArticleList, imgUrl } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      params: {
        contentTitle: "",
        categoryId: "1503550311648780290",
        contentDisplay: "0",
        pageNo: 1,
        pageSize: 5,
      },
      resultData: {
        total: 0,
        rows: [],
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.initData();
    });
    //自定义方法
    const methods = {
      initData: () => {
        methods.getList();
      },
      getList() {
        getArticleList(data.params).then((res) => {
          data.resultData = res.data;
        });
      },
      onSearch() {
        data.params.pageNo = 1;
        methods.getList();
      },
      onPageChange(page) {
        data.params.pageNo = page;
        methods.getList();
      },
      //跳转单页
      jumpSingle(id) {
        proxy.$router.push({ path: `/news/${id}` });
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped></style>
